<template>
 <div class="yingmoo-media">
   <ym-header></ym-header>
   <ym-medianav></ym-medianav>
   <ym-secondnav></ym-secondnav>
   
<!--  广告轮播  -->
    <div class="ym-lunbo">
      <el-carousel indicator-position="inside">
        <el-carousel-item v-for="(v,i) in banners" :key="i">
          <img :src="v.imgpath" />
        </el-carousel-item>
      </el-carousel>
    </div>
<!--  热门媒体  -->
    <div class="yingmoo-animation">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">热门媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>灯箱</span>
          <span>LED显示屏</span>
        </p>
      </div>
      <div class="column-animation">
        <img v-for="v in list1" :key="v" src="../assets/ym-media/hotts.png" class="images" />
        <div class="column-contents">
          <div class="column-content contentTwo">
            <dl class="media-model" v-for="n in list2" :key="n">
              <dt>
                <img width="222px" height="198px" :src="n.imgpath" />
              </dt>
              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
              <dd class="media-text-secend">￥{{n.price}}</dd>
              <dd class="media-text-city">{{n.remark}}</dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
<!--  商超媒体  -->
    <div class="yingmoo-passenger-media">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">商超媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>上海</span>
          <span>北京</span>
          <span>广州</span>
          <span>深圳</span>
          <span>杭州</span>
        </p>
      </div>
      <div class="column-center">
        <div class="center-left">
          <ul class="activity-left">
            <li @mouseenter='shos=1'>看板</li>
            <li @mouseenter='shos=0,shon=1'>电视</li>
            <li @mouseenter='shon=0,shos=0,shom=1'>海报</li>
            <li @mouseenter='shon=0,shos=0,shom=0,shoa=1'>吊旗</li>
            <li @mouseenter='shon=0,shos=0,shom=0,shoa=0,shob=1'>手推车</li>
            <li @mouseenter='shon=0,shos=0,shom=0,shoa=0,shob=0,shoc=1'>刷屏机</li>
            <li @mouseenter='shon=0,shos=0,shom=0,shoa=0,shob=0,shoc=0,shod=1'>其他</li>
            <!--<li @mouseenter='shon=0,shos=0,shom=0,shoa=0,shob=0,shoc=0,shod=0,shoe=1'>滚动灯箱</li>-->
          </ul>
        </div>
        <div class="center-right">
          <div class="centers-move" @mouseenter='shos=1' @mouseleave='shos=1' v-show='shos==1'>
            <div class="column-content">
              <dl class="media-model" v-for="n in list3" :key="n">
	              <dt>
	                <img width="222px" height="198px" :src="n.imgpath" />
	              </dt>
	              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	              <dd class="media-text-secend">￥{{n.price}}</dd>
	              <dd class="media-text-city">{{n.remark}}</dd>
	            </dl>
            </div>
          </div>
          <div class="centers-move" @mouseenter='shon=1' @mouseleave='shon=1' v-show='shon==1'>
            <div class="column-content">
              <dl class="media-model" v-for="n in list4" :key="n">
	              <dt>
	                <img width="222px" height="198px" :src="n.imgpath" />
	              </dt>
	              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	              <dd class="media-text-secend">￥{{n.price}}</dd>
	              <dd class="media-text-city">{{n.remark}}</dd>
	            </dl>
            </div>
          </div>
          <div class="centers-move" @mouseenter='shom=1' @mouseleave='shom=1' v-show='shom==1'>
            <div class="column-content">
              <dl class="media-model" v-for="n in list5" :key="n">
	              <dt>
	                <img width="222px" height="198px" :src="n.imgpath" />
	              </dt>
	              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	              <dd class="media-text-secend">￥{{n.price}}</dd>
	              <dd class="media-text-city">{{n.remark}}</dd>
	            </dl>
            </div>
          </div>
          <div class="centers-move" @mouseenter='shoa=1' @mouseleave='shoa=1' v-show='shoa==1'>
            <div class="column-content">
              <dl class="media-model" v-for="n in list6" :key="n">
	              <dt>
	                <img width="222px" height="198px" :src="n.imgpath" />
	              </dt>
	              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	              <dd class="media-text-secend">￥{{n.price}}</dd>
	              <dd class="media-text-city">{{n.remark}}</dd>
	            </dl>
            </div>
          </div>
          <div class="centers-move" @mouseenter='shob=1' @mouseleave='shob=1' v-show='shob==1'>
            <div class="column-content">
              <dl class="media-model" v-for="n in list7" :key="n">
	              <dt>
	                <img width="222px" height="198px" :src="n.imgpath" />
	              </dt>
	              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	              <dd class="media-text-secend">￥{{n.price}}</dd>
	              <dd class="media-text-city">{{n.remark}}</dd>
	            </dl>
            </div>
          </div>
          <div class="centers-move" @mouseenter='shoc=1' @mouseleave='shoc=1' v-show='shoc==1'>
            <div class="column-content">
              <dl class="media-model" v-for="n in list8" :key="n">
	              <dt>
	                <img width="222px" height="198px" :src="n.imgpath" />
	              </dt>
	              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	              <dd class="media-text-secend">￥{{n.price}}</dd>
	              <dd class="media-text-city">{{n.remark}}</dd>
	            </dl>
            </div>
          </div>
          <div class="centers-move" @mouseenter='shod=1' @mouseleave='shod=1' v-show='shod==1'>
            <div class="column-content">
              <dl class="media-model" v-for="n in list9" :key="n">
	              <dt>
	                <img width="222px" height="198px" :src="n.imgpath" />
	              </dt>
	              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	              <dd class="media-text-secend">￥{{n.price}}</dd>
	              <dd class="media-text-city">{{n.remark}}</dd>
	            </dl>
            </div>
          </div>
          <div class="centers-move" @mouseenter='shoe=1' @mouseleave='shoe=1' v-show='shoe==1'>
            <div class="column-content">
              <dl class="media-model" v-for="n in list10" :key="n">
	              <dt>
	                <img width="222px" height="198px" :src="n.imgpath" />
	              </dt>
	              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	              <dd class="media-text-secend">￥{{n.price}}</dd>
	              <dd class="media-text-city">{{n.remark}}</dd>
	            </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--  picture广告位  -->
    <div class="yingmoo-picture">
        <img v-for="v in list11" :src="v.imgpath" :key="v"/>
    </div>

<!--  TOP店铺  -->
    <div class="yingmoo-template">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">TOP店铺</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
        <dl class="media-model" v-for="n in list12" :key="n">
          <dt>
            <img width="222px" height="198px" :src="n.imgpath" />
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
        </dl>
      </div>
    </div>
    <ym-footer></ym-footer>
 </div>
</template>
<script>
  import ymHeader from "@/components/ymHeader.vue";
  import ymMedianav from "@/components/ymMedianav.vue";
  import ymFooter from "@/components/ymFooter.vue";
  import ymSecondnav from "@/components/ymSecondnav.vue";
  export default {
    name: "yingmoo-media",
    components: {
      ymHeader,
      ymMedianav,
      ymSecondnav,
      ymFooter
    },
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        /* banner数据，方便修改 */
        banners: [{
          imgUrl: require('@/assets/ym-media/super-lunbo.png')
        }, {
          imgUrl: require('@/assets/ym-media/super-lunbo.png')
        }, {
          imgUrl: require('@/assets/ym-media/super-lunbo.png')
        }],
        list1:[],
	    list2:[],
	    list3:[],
	    list4:[],
	    list5:[],
	    list6:[],
	    list7:[],
	    list8:[],
	    list9:[],
	    list10:[],
	    list11:[],
	    list12:[],
        shos: 1,
        shon: 0,
        shom: 0,
        shoa: 0,
        shob: 0,
        shoc: 0,
        shod: 0,
        shoe: 0,
        model: [{
          modeltext: '公司名称公司名称公司名称'
        }, {
          modeltext: '公司名称公司名称公司名称'
        }, {
          modeltext: '公司名称公司名称公司名称'
        }, {
          modeltext: '公司名称公司名称公司名称'
        }, {
          modeltext: '公司名称公司名称公司名称'
        },{
          modeltext: '公司名称公司名称公司名称'
        }, {
          modeltext: '公司名称公司名称公司名称'
        }, {
          modeltext: '公司名称公司名称公司名称'
        }, {
          modeltext: '公司名称公司名称公司名称'
        }, {
          modeltext: '公司名称公司名称公司名称'
        }],
        models: [{
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '廊桥',
          modellooks: 'LED显示屏'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '廊桥',
          modellooks: 'LED显示屏'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '廊桥',
          modellooks: 'LED显示屏'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '廊桥',
          modellooks: 'LED显示屏'
        },{
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '廊桥',
          modellooks: 'LED显示屏'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '廊桥',
          modellooks: 'LED显示屏'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '廊桥',
          modellooks: 'LED显示屏'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '廊桥',
          modellooks: 'LED显示屏'
        }],
        animation: [{
          animationtext: '媒体名称媒体名称媒体名称',
          animationmoney: '价格：120万 元/年',
          animationcity: '北京西站',
          animationlook: '看板'
        }, {
          animationtext: '媒体名称媒体名称媒体名称',
          animationmoney: '价格：120万 元/年',
          animationcity: '北京西站',
          animationlook: '看板'
        }, {
          animationtext: '媒体名称媒体名称媒体名称',
          animationmoney: '价格：120万 元/年',
          animationcity: '北京西站',
          animationlook: '看板'
        }, {
          animationtext: '媒体名称媒体名称媒体名称',
          animationmoney: '价格：120万 元/年',
          animationcity: '北京西站',
          animationlook: '看板'
        }, {
          animationtext: '媒体名称媒体名称媒体名称',
          animationmoney: '价格：120万 元/年',
          animationcity: '北京西站',
          animationlook: '看板'
        }, {
          animationtext: '媒体名称媒体名称媒体名称',
          animationmoney: '价格：120万 元/年',
          animationcity: '北京西站',
          animationlook: '看板'
        }, {
          animationtext: '媒体名称媒体名称媒体名称',
          animationmoney: '价格：120万 元/年',
          animationcity: '北京西站',
          animationlook: '看板'
        },{
          animationtext: '媒体名称媒体名称媒体名称',
          animationmoney: '价格：120万 元/年',
          animationcity: '北京西站',
          animationlook: '看板'
        }]

      }
    },
    mounted(){
		this.getList(115,3);//轮播
		this.getList(116,1);//
		this.getList(117,8);//
		this.getList(118,8);//
		this.getList(119,8);//
		this.getList(120,8);//
		this.getList(121,8);//
		this.getList(122,8);//
		this.getList(123,8);
		this.getList(124,8);
		this.getList(126,1);
		this.getList(127,10);
	},
	methods:{
		getList:function(adid ,limit){
	  		this.$http({
					url: this.requestAddr+'/GetJson/get/adshow?adid='+adid+"&limit="+limit,
					method: 'JSONP',
				    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
					jsonp: 'callbackparam'
				}).then(res => {
					console.log(res.data);
					if(res.data != null){
						if(adid == 115){this.banners = res.data;}
						if(adid == 116){this.list1 = res.data;}
						if(adid == 117){this.list2 = res.data;}
						if(adid == 118){this.list3 = res.data;}
						if(adid == 119){this.list4 = res.data;}
						if(adid == 120){this.list5 = res.data;}
						if(adid == 121){this.list6 = res.data;}
						if(adid == 122){this.list7 = res.data;}
						if(adid == 123){this.list8 = res.data;}
						if(adid == 124){this.list9 = res.data;}
						if(adid == 126){this.list11 = res.data;}
						if(adid == 127){this.list12 = res.data;}
					}
				}).catch()
		}
	}
  }
</script>

<style scoped lang="less">
  .yingmoo-media {
    width: 100%;
    background-color: #f3f9ff;
    .ym-lunbo {
      width: 100%;
      height: 450px;
      position: absolute;
      top: 234px;
      left: 0;
      z-index: 1;
    }
    .yingmoo-passenger-media {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
        .column-citys {
          line-height: 44px;
          width: 342px;
          background: none;
          color: #999999;
          float: right;
          span {
            padding-left: 15px;
            padding-right: 15px;
            font-size: 14px;
          }
        }
      }
      .column-center {
        width: 1200px;
        display: flex;
        justify-content: space-between;
        .center-left {
          width: 248px;
          height: 620px;
          background-color: #036eb7;
          .activity-left {
            margin-top: -1px;
            width: 248px;
            height: 623px;
            overflow: hidden;
            background-image: url(../assets/ym-media/building-images1.png);
            background-size: 100% 100%;
            background-color: #036eb7;
            li {
              height: 38px;
              margin-top: 35px;
              line-height: 38px;
              text-align: center;
              color: white;
            }
            li:hover {
              color: #f29600;
              background-color: #c7e8fa;
            }
          }
        }
        .center-right {
          width: 940px;
          height: 623px;
          overflow: hidden;
          .centers-move {
            width: 940px;
            height: 604px;
            .column-content {
              width: 940px;
              background-color: transparent;
              .media-model {
                width: 224px;
                height: 291px;
                margin-top: 22px;
                float: left;
                margin-left: 11px;
                dd {
                  background-color: white;
                  height: 24px;
                  line-height: 24px;
                  padding-left: 10px;
                }
                .media-text-first {
                  font-size: 14px;
                  padding-top: 9px;
                  overflow: hidden;
                  text-overflow: clip;
                  height: 24px;
                }
                .media-text-secend {
                  font-size: 12px;
                  color: red;
                }
                .media-text-city {
                  font-size: 12px;
                  color: #999999;
                  padding-bottom: 6px;
                  span {
                    padding-left: 15px;
                  }
                }
              }
            }
          }
        }
      }
    }

    .yingmoo-picture {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      img {
        width: 100%;
      }
    }

    .yingmoo-animation {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
        .column-citys {
          line-height: 44px;
          width: 210px;
          background: none;
          color: #999999;
          float: right;
          span {
            padding-left: 20px;
            padding-right: 20px;
            font-size: 14px;
          }
        }
      }
      .column-animation {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .images {
          height: 600px;
          margin-top: 20px;
        }
        .column-contents {
          width: 960px;
          .column-content {
            width: 960px;
            background-color: transparent;
            .media-model {
              width: 224px;
              height: 291px;
              margin-top: 20px;
              float: left;
              margin-left: 16px;
              dd {
                background-color: white;
                height: 24px;
                line-height: 24px;
                padding-left: 10px;
              }
              .media-text-first {
                font-size: 14px;
                padding-top: 9px;
                overflow: hidden;
                text-overflow: clip;
                height: 24px;
              }
              .media-text-secend {
                font-size: 12px;
                color: red;
              }
              .media-text-city {
                font-size: 12px;
                color: #999999;
                padding-bottom: 6px;
                span {
                  padding-left: 15px;
                }
              }
            }
          }
          .contentTwo {
            margin-top: 2px;
          }
        }
      }
    }
    .yingmoo-template {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
      }
      .column-content {
        width: 1200px;
        height: 560px;
        background-color: transparent;
        .media-model {
          width: 224px;
          height: 240px;
          margin-top: 20px;
          float: left;
          margin-left: 20px;
          background-color: white;
          &:nth-child(1){
            margin-left: 0;
          }
          &:nth-child(6){
            margin-left: 0;
          }
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
          }
          .media-text-first {
            font-size: 14px;
            padding-top: 9px;
            text-align: center;
            padding-bottom: 9px;
            overflow: hidden;
            text-overflow: clip;
            height: 20px;
          }
        }
      }
    }
  }

</style>
